<template>
  <gui-page>
    <template v-slot:gBody>
      <!-- 轮播图  -->
      <!-- <view> -->
      <!--        <gui-swiper :swiperItems="swiperItems" :spacing="0" :padding="0" borderRadius="0rpx" :width="750" :height="330">
        </gui-swiper> -->
      <!-- </view> -->
      <view>
        <image style="width: 100%;" :src="baseUrl + product.image || defImgUrl" mode="scaleToFill"></image>
      </view>
      <!-- 商品标题 分享按钮 -->
      <view class="gui-padding  gui-bg-white gui-dark-bg-level-3 self-shop-name">
        <text class="gui-h5 gui-block product-name gui-block">{{product.shopName}}</text>
        <text style="color: gray; font-size: 26rpx;">{{product.address}}</text>
      </view>

      <view class="gui-padding gui-bg-white self-shop-desc">
        <text class="gui-color-gray">公司描述</text>
        <text class="gui-color-gray" style="font-size: 28rpx;">{{product.description}}</text>
      </view>
      <view class="gui-padding gui-bg-white">
        <view class="gui-h5 gui-block product-name gui-block">菜品图片</view>
        <template v-if="product.dishImage?.length">
          <view @click="onPreviewImage(index)" v-for="(src, index) in product.dishImage" :key="src">
            <!-- {{baseUrl + product.dishImage}} -->
            <image :src="baseUrl + src" mode="scaleToFill" style="width: 100%;"></image>
          </view>
        </template>
        <view v-else>
          <text class="gui-color-gray" style="font-size: 28rpx;">暂无</text>
        </view>
      </view>
      <view style="height:120rpx;"></view>
    </template>
  </gui-page>
</template>
<script>
  var face =
    "/static/images/daxi.jpg";
  var img =
    "/static/images/daxi.jpg";
  export default {
    data() {
      return {
        // 基础路径
        baseUrl: uni.gRequest.file,
        // 默认图片
        defImgUrl: 'https://images.unsplash.com/photo-1663697651653-68fe83aa6f30?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw4fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=100&q=90',
        // 商品信息
        product: {},
        // 属性选择
        attrShow: false,

        product_id: '',
        shop_id: '',
        shopInfo: {},
        productInfo: {},
        user_id: '',
      }
    },
    onLoad(e) {
      if (e.id) {
        this.product_id = e.id;
        this.initData()
      }

      var user = uni.gRequest.checkLogin();

      if (user) {
        this.user_id = user.user_id
      }
    },
    methods: {
      // 点击图片预览
      onPreviewImage(index) {
        uni.previewImage({
          current: index,
          urls: this.product.dishImage.map(item => this.baseUrl + item),
          fail(err) {
            console.log('errPreviewImage', err);
          }
        })
      },
      async initData() {
        // 商铺接口
        const res = await uni.gRequest.get('shop/' + this.product_id)
        const shortData = {
          ...res.data,
          dishImage: res.data.dishImage.split(',')
        }
        this.product = shortData;
        // console.log('11111', this.product)
        //  
      },
      // 分享
      share: function() {
        uni.showToast({
          title: '分享',
          icon: "none"
        });
      },

      // 返回首页
      goHome: function() {
        uni.navigateBack()
      },
      // 点击喜欢、收藏、关注

      // 购买 
      buynow: function() {
        uni.gRequest.get('dict/get/information', {
          key: 'service.phone'
        }).then(result => {
          uni.showModal({
            title: '联系客服',
            content: result.msg,
            showCancel: true,
            cancelText: '取消',
            confirmText: '呼叫',
            success: res => {
              if (res.confirm) {
                uni.makePhoneCall({
                  phoneNumber: res.content
                })
              }

            },
            fail: () => {},
            complete: () => {}
          });
        });


      },


    }
  }
</script>
<style scoped>
  .self-shop-name {
    display: flex;
    flex-direction: column;
  }

  .self-shop-desc {
    padding-top: 0%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .product-name {
    width: 560rpx;
    line-height: 50rpx;
  }

  .product-share {
    width: 80rpx;
    height: 80rpx;
    text-align: center;
    font-size: 50rpx;
    color: #FF7900;
    line-height: 80rpx;
  }

  .product-price {
    color: #FF7900;
    line-height: 60rpx;
    font-size: 30rpx;
    font-weight: bold;
  }

  .gui-common-line {
    height: 18rpx;
  }

  .product-footer {
    position: fixed;
    z-index: 99;
    left: 0;
    bottom: 0;
    width: 750rpx;
  }

  .product-attr {
    width: 700rpx;
    margin: 25rpx;
    height: 580rpx;
  }

  .gui-padding {
    padding: 20rpx 25rpx;
  }

  .gui-footer-icon-buttons {
    width: 100rpx;
  }


  /* 卡片视图 */
  .gui-card-view {
    padding: 25rpx;
    margin: 0 30rpx;
    margin-top: 30rpx;
  }

  .gui-card-body {
    padding-bottom: 30rpx;
  }

  .gui-card-img {
    width: 100rpx;
    height: 100rpx;
    border-radius: 80rpx;
  }

  .gui-card-desc {
    width: 400rpx;
    margin-left: 25rpx;
    flex: 1;
  }

  .gui-card-name {
    font-size: 28rpx;
    line-height: 40rpx;
    margin-right: 20rpx;
  }

  .gui-card-text {
    line-height: 40rpx;
    font-size: 24rpx;
  }

  .gui-card-footer {
    margin-top: 25rpx;
  }

  .gui-card-footer-item {
    width: 100rpx;
    text-align: center;
    flex: 1;
    line-height: 38rpx;
    font-size: 26rpx;
  }

  /* #ifndef APP-NVUE */
  .gui-card-footer-item {
    display: block;
  }

  .gui-box-shadow {
    box-shadow: 0px 0px 3rpx #999999;
  }

  /* #endif */
</style>
